import React, { useEffect, useCallback, useReducer, Dispatch, memo, forwardRef } from 'react';
import { Title } from '@/components/common'
import { EditStatus } from 'gantd';
import LoupeSelect from '@/components/form/loupeselect';
import { searchFormschema, searchUISchema, columns } from './schema'
import { ActionType, StateType, initState, reducer } from './reducer'
import { fetchCodeListApi } from './service';

export interface CodeListSelectorProps {
	value?: string | string[],
	onChange?: (value: string | string[]) => void,
	multiple?: boolean,
	defalutValue?: string | string[],
	edit?: EditStatus.EDIT | EditStatus.CANCEL | EditStatus.SAVE
	size?:'larget'|'small'|'default'
}
function CodeListSelector(props: CodeListSelectorProps, ref: any) {
	const { defalutValue, value: _value, onChange, multiple, edit = EditStatus.EDIT,size='default' } = props;
	const [state, dispatch]: [StateType, Dispatch<ActionType>] = useReducer(reducer, initState);
	const { value, dropDownData, modalData, loading, total, params } = state;
	const queryBySelect = useCallback(async () => {
		const { content } = await fetchCodeListApi({ ...initState.params });
		dispatch({ type: "saveDropDownData", payload: content });
	}, [])
	useEffect(() => {
		dispatch({ type: "saveValue", payload: _value });
	}, [_value])
	useEffect(() => {
		defalutValue && dispatch({ type: "saveValue", payload: defalutValue });
		queryBySelect()
	}, [])
	const onValueChange = useCallback((value) => {
		dispatch({ type: "saveValue", payload: value });
		if (onChange) onChange(value)
	}, [onChange])
	const queryByModal = useCallback(async (params) => {
		await dispatch({ type: "save", payload: { params, loading: true } });
		const { totalCount, content } = await fetchCodeListApi({ ...params });
		dispatch({ type: 'save', payload: { total: totalCount, modalData: content, loading: false } })
	}, [])
	const onChangePage = useCallback((current, pageSize) => {
		const beginIndex = (current - 1) * pageSize;
		queryByModal({ ...params, pageSize, beginIndex })
	}, [params])
	const onModalVisibleChange = useCallback(async (visible) => {
		visible ? queryByModal(initState.params) : dispatch({ type: "initModal" })
	}, [])

	const onSearch = useCallback((searchParams) => {
		const { beginIndex, pageSize } = params;
		queryByModal({ ...searchParams, beginIndex, pageSize });
	}, [params])
	return <LoupeSelect
		selectorId='CodeListSelector-LoupeSelect'
		value={value}
		dataSource={dropDownData}
		useCache={false}
		edit={edit}
		labelProp='name'
		valueProp="type"
		onChange={onValueChange}
		multiple={multiple}
		size={size}
		viewProps={{
			title: <Title title={tr("编码类型")} />,
			searchFormTitle: <Title title={tr("条件查询")} />,
			onModalVisibleChange,
			viewKey: 'codeListSelector',
			uiSchema: searchUISchema,
			schema: searchFormschema,
			columns,
			dataSource: modalData,
			loading: loading,
			onSearch,
			//分页自定义
			pagination: {
				total: total, //总条数
				beginIndex: params.beginIndex, //当前页数
				pageSize: params.pageSize, //每页显示数
				onChange: onChangePage
			}
		}}
	/>
}

export default memo(forwardRef(CodeListSelector))